<template>
  <div class="page-index">
    <!--幻灯片-->
    <div class="wo-screen">
      <div class="wo-screen-slide">
        <swiper style="width: 100%" :list="slideList" :show-dots="false" :show-desc-mask="false" :aspect-ratio="450/750" :auto="true"></swiper>
      </div>
      <div class="wo-screen-mask"><img src="../assets/image/screen-mask.png" alt="mask" /></div>
    </div>
    <!--主内容区-->
    <div class="wo-wrap">
      <div class="wo-panel">
        <!--活动标题-->
        <div class="wo-title">{{mainData.name}}</div>
        <!--开奖信息-->
        <div class="wo-info">
          <div class="wo-info-item wo-time">
            <i class="wo-icon"><img class="wo-icon-image" src="../assets/image/icon-time.png" alt="icon" /></i>
            <span>开奖时间：2018/10/27 16:00</span>
          </div>
          <div class="wo-info-item wo-view">
            <i class="wo-icon"><img class="wo-icon-image" src="../assets/image/icon-view.png" alt="icon" /></i>
            <span>{{mainData.count_view||'10万+'}}</span>
          </div>
        </div>
        <!--倒计时-->
        <div class="wo-count-down-wrap">
          <clocker class="wo-count-down" time="2018-10-27 16:00">
            <div class="wo-item">
              <span class="wo-time">%D</span>
              <span class="wo-label">天</span>
            </div>
            <div class="wo-dot"></div>
            <div class="wo-item">
              <span class="wo-time">%H</span>
              <span class="wo-label">时</span>
            </div>
            <div class="wo-dot"></div>
            <div class="wo-item">
              <span class="wo-time">%M</span>
              <span class="wo-label">分</span>
            </div>
            <div class="wo-dot"></div>
            <div class="wo-item">
              <span class="wo-time">%S</span>
              <span class="wo-label">秒</span>
            </div>
          </clocker>
        </div>
        <!--抽奖码-->
        <div class="wo-ticket-wrap">
          <ticket clickEvent="ticketEvent" @ticketEvent="actorAddFunc" :ticketData="actorShowData"></ticket>
        </div>
        <!--参与列表-->
        <div class="wo-user-wrap">
          <user-list :listData="actorList"></user-list>
        </div>
        <!--获奖滚动-->
        <div class="wo-marquee-wrap" v-if="wxredList.items">
          <marquee>
            <marquee-item v-for="(value, index) in wxredList.items" :key="index" class="align-middle">恭喜“{{value.user_name}}”获得<span style="color: #f30;">￥{{value.amount}}</span>元分享红包</marquee-item>
          </marquee>
        </div>
      </div>
      <!--活动详情-->
      <div class="wo-panel">
        <div class="wo-panel-head">
          <div class="wo-panel-title">活动详情</div>
        </div>
        <div class="wo-panel-body">
          <div id="wo-content" v-html="mainData.content"></div>
        </div>
      </div>
    </div>
    <!--弹窗部分-->
    <div v-transfer-dom>
      <x-dialog v-model="showActorForm">
        <div style="padding: 20px 10px;">
          <group style="margin-bottom: 20px;">
            <div slot="title" style="height: 30px; margin-top: 10px; font-size: 20px; line-height: 30px;">报名参与</div>
            <x-input title="姓名" placeholder="请输入真实姓名" is-type="china-name" v-model="actorData.name"></x-input>
            <x-input title="手机" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile" v-model="actorData.phone"></x-input>
          </group>
          <x-button type="warn" action-type="button" @click.native="actorSubmitFunc">保存</x-button>
        </div>
        <div @click="showActorForm=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
    <!--奖品-->
    <div v-transfer-dom>
      <x-dialog v-model="showPrizePanel" :dialog-style="{'background-color': 'transparent'}">
        <div class="wo-prize-panel">
          <div class="wo-seller">{{prizeData.seller}}</div>
          <div class="wo-name">{{prizeData.name}}</div>
          <div class="wo-describe">{{prizeData.describe}}</div>
          <!--按钮-->
          <div class="wo-button-wrap">
            <x-button mini type="warn" @click.native="showPrizePanel=false">已阅</x-button>
          </div>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
  import { Swiper, Clocker, XDialog, Group, XInput, XButton, Marquee, MarqueeItem, TransferDomDirective as TransferDom } from 'vux'
  import Ticket from '@/components/Ticket'
  import UserList from '@/components/UserListSimple'
  import slide01 from '@/assets/image/slide-1.jpg'
  import slide02 from '@/assets/image/slide-2.jpg'
  export default {
    name: 'IndexPage',
    directives: {
      TransferDom
    },
    components: {
      Swiper,
      Clocker,
      Ticket,
      UserList,
      XDialog,
      Group,
      XInput,
      XButton,
      Marquee,
      MarqueeItem
    },
    created: function () {
      // 获取主数据
      this.mainShowFunc()
      // 参与展示
      this.actorShowFunc()
      // 获取参与列表
      this.actorListFunc()
      // 获取红包列表
      this.wxredListFunc()
    },
    data () {
      return {
        slideList: [{
          url: 'javascript:;',
          img: slide01,
          title: '主图'
        },
        {
          url: 'javascript:;',
          img: slide02,
          title: '主图'
        }],
        mainData: {},
        actorShowData: {
          name: '点击参与',
          ticket: '',
          tips: '点击获取专属抽奖码'
        },
        showActorForm: false,
        actorData: {
          name: '',
          phone: ''
        },
        prizeData: {
          seller: '',
          name: '',
          describe: ''
        },
        showPrizePanel: false,
        actorList: {},
        wxredList: {}
      }
    },
    methods: {
      /**
       * 获取主数据
       */
      mainShowFunc: function () {
        this.$http.get(this.$appConfig.api_main_show).then((response) => {
          if (response.data.code == 1) { //eslint-disable-line
            this.mainData = response.data.data
            this.$vux.alert.show({
              title: '温馨提示',
              content: '<div><div>恭喜您已成功报名</div><div>转发朋友圈得<span style="color: #f30;">现金红包</span></div><div><span style="color: #f30;">10月27日</span></div><div>逸合·山语城现场抽锦鲤</div><div>如抽中锦鲤就在现场</div><div>独得<span style="color: #f30;">5000</span>元现金红包</div><div>否则现场将下<span style="color: #f30;">红包雨</span>请及时预约到场品鉴烤羊见证锦鲤诞生！！！</div></div>'
            })
            return false
          }
          // 提示参与方式
          this.$vux.alert.show({
            title: '温馨提示',
            content: '<div><div>欢迎您逸合·南充锦鲤</div><div>点击<span style="color: #f30;">立即参与</span>按钮报名</div><div>报名成功即可获得<span style="color: #f30;">“逸合第三届烤羊节”</span>烤羊券</div><div>转发朋友圈达到<span style="color: #f30;">1</span>人访问即可获得一个<span style="color: #f30;">现金红包</span></div><div>请注意您的微信零钱通知！！！</div></div>'
          })
        }).catch(function (error) {
          console.log(error)
        })
      },
      actorListFunc: function () {
        this.$http.get(this.$appConfig.api_actor_list).then((response) => {
          if (response.data.code == 1 && response.data.data) { //eslint-disable-line
            this.actorList = response.data.data
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      wxredListFunc: function () {
        this.$http.get(this.$appConfig.api_wxred_list).then((response) => {
          if (response.data.code == 1 && response.data.data) { //eslint-disable-line
            this.wxredList = response.data.data
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      /**
       * 参与
       */
      actorAddFunc: function () {
        if (!this.actorShowData.ticket) {
          this.showActorForm = true
          return false
        }
        // 提示开奖日期
        this.$vux.alert.show({
          title: '提示',
          content: '<div>2018/10/27日</div><div style="color: #f30;">逸合·山语城</div><div>现场全程直播开奖</div>'
        })
      },
      /**
       * 提交
       */
      actorSubmitFunc: function () {
        console.log(this.actorData)
        // region 参数验证
        if (!this.actorData.name) {
          this.$vux.toast.show({
            type: 'warn',
            text: '姓名不能为空',
            isShowMask: false
          })
          return false
        }
        if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.actorData.phone))) {
          this.$vux.toast.show({
            type: 'warn',
            text: '手机号码错误',
            isShowMask: false
          })
          return false
        }
        // endregion
        this.showActorForm = false
        // 加载提示
        this.$vux.loading.show({
          text: 'Loading'
        })
        this.$http.post(this.$appConfig.api_actor_add, {
          main: this.actorData.main,
          name: this.actorData.name,
          phone: this.actorData.phone
        }).then((response) => {
          console.log(response)
          this.$vux.loading.hide()
          if (response.data.code === 1) {
            // TODO 报名成功
            // 刷新参与
            this.actorShowFunc()
            // 刷新列表
            this.actorListFunc()
            let that = this
            this.$vux.alert.show({
              title: '恭喜',
              content: '<div style="color: #f30;">报名成功</div><div style="color: #f30;">分享朋友圈或发给朋友，得现金红包</div>',
              onHide () {
                if (response.data.data) {
                  that.showPrizeFunc(response.data.data.name, response.data.data.product_name, response.data.data.excerpt)
                }
              }
            })
            return false
          }
          this.$vux.alert.show({
            title: '提示',
            content: response.data.msg
          })
        }).catch(function (error) {
          console.log(error)
          this.$vux.loading.hide()
          this.$vux.alert.show({
            title: '错误',
            content: '<div>报名失败!</div><div>请联系微信/QQ:229417598反馈</div>'
          })
        })
      },
      /**
       * 展示
       */
      actorShowFunc: function () {
        this.$http.post(this.$appConfig.api_actor_show, {
          'actor': ''
        }).then((response) => {
          if (response.data.code == 1) { //eslint-disable-line
            this.actorShowData = {
              name: response.data.data.name,
              ticket: response.data.data.ticket,
              tips: '全程直播开奖'
            }
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      /**
       *
       * @param seller
       * @param name
       * @param describe
       */
      showPrizeFunc: function (seller, name, describe) {
        this.prizeData = {
          seller: seller,
          name: name,
          describe: describe
        }
        this.showPrizePanel = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  //幻灯片
  .wo-screen {
    @include responsive-box(60%);
    overflow: hidden;
    .wo-screen-slide {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #ccc;
    }
    .wo-screen-mask {
      bottom: 0;
      width: 100%;
      height: auto;
      line-height: 0;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
  //内容包裹
  .wo-wrap {
    padding: unified-unit(10px);
  }
  //活动标题
  .wo-title {
    font-size: unified-unit(16px);
    line-height: unified-unit(25px);
    margin-bottom: unified-unit(10px);
  }
  //活动信息
  .wo-info {
    display: flex;
    .wo-info-item {
      flex: 1;
      display: flex;
      height: unified-unit(20px);
      line-height: unified-unit(20px);
      font-size: unified-unit(12px);
      .wo-icon {
        flex: 0 0 unified-unit(20px);
        margin-right: unified-unit(5px);
      }
      span {
        flex: 1;
        color: #666;
      }
      &.wo-view {
        flex: 0 1 unified-unit(60px);
        justify-content: end;
        //text-align: right;
      }
    }
  }
  //倒计时
  .wo-count-down-wrap {
    margin-top: unified-unit(10px);
    border-top: 1px dashed $border-color;
    padding-top: unified-unit(9px);
    margin-bottom: unified-unit(10px);
    line-height: 0;
    text-align: center;
  }
  .wo-count-down {
    .wo-item {
      float: left;
      display: block;
      background-color: rgba(0, 0, 0, .8);
      padding: unified-unit(5px);
      border-radius: 5px;
      text-align: center;
      color: #fff;
      .wo-time {
        display: block;
        height: unified-unit(20px);
        line-height: unified-unit(20px);
        font-size: unified-unit(16px);
      }
      .wo-label {
        display: block;
        height: unified-unit(10px);
        line-height: unified-unit(10px);
        font-size: unified-unit(8px);
      }
    }
    .wo-dot {
      float: left;
      position: relative;
      display: block;
      width: unified-unit(20px);
      height: unified-unit(40px);
      &:before, &:after {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #000;
      }
      &:before {
        top: 25%;
      }
      &:after {
        bottom: 25%;
      }
    }
  }
  //优惠券
  .wo-ticket-wrap {
    padding: unified-unit(10px);
    width: 90%;
    margin: 0 auto;
  }
  //奖品
  .wo-prize-panel {
    @include responsive-box(85%);
    background-image: url("../assets/image/prize-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    .wo-title, .wo-content, .wo-describe {
      margin: 0;
      width: 100%;
    }
    //商家
    .wo-seller {
      top: 10%;
      width: 100%;
      height: unified-unit(25px);
      line-height: unified-unit(25px);
      font-size: unified-unit(16px);
      color: #712722;
    }
    //名称
    .wo-name {
      top: 25%;
      width: 100%;
      line-height: unified-unit(25px);
      font-size: unified-unit(18px);
      color: #f14500;
    }
    //描述
    .wo-describe {
      top: 40%;
      line-height: unified-unit(20px);
      font-size: unified-unit(12px);
      color: #712722;
    }
    //按钮
    .wo-button-wrap {
      bottom: 10%;
      width: 100%;
      .weui-btn_warn {
        background-color: #ffd400;
        color: #712722;
      }
    }
  }
  #wo-content {
    overflow: hidden;
    font-size: unified-unit(14px);
    line-height: unified-unit(25px);
    img {
      max-width: 100%;
    }
  }
  //公告
  .wo-marquee-wrap {
    padding: unified-unit(10px);
    overflow: hidden;
    font-size: unified-unit(12px);
    line-height: unified-unit(25px);
    text-align: center;
    .align-middle {
      height: unified-unit(25px);
      overflow: hidden;
    }
  }
</style>